const gulp=require("gulp")
gulp.task("sayhi",async()=>{
     console.log("hello 大麦")
})
const connect=require("gulp-connect")
gulp.task("connect",async()=>{
    // server 代表服务器
      connect.server({
           livereload:true     
      })
})
gulp.task("font",async()=>{
    gulp.src(["./src/font/*.*"])
    .pipe(gulp.dest("./dist/font"))
    .pipe(connect.reload())
})
// 存储和压缩html代码
gulp.task("html",async()=>{
    gulp.src(["./src/**/*.html"])
    .pipe(gulp.dest("./dist"))
    .pipe(connect.reload())
})
const htmlmin=require("gulp-htmlmin")
gulp.task("html-min",async()=>{
     gulp.src(["./src/**/*.html"])
     .pipe( htmlmin({ collapseWhitespace: true }) )
     .pipe(gulp.dest("./dist"))
})
// 存储和压缩js代码
const uglify=require("gulp-uglify")
gulp.task("javascripts",async()=>{
    gulp.src(["./src/javascripts/**/*.js"])
    .pipe(gulp.dest("./dist/javascripts"))
    .pipe(connect.reload())
})
gulp.task("javascripts-min",async()=>{
    gulp.src(["./src/javascripts/**/*.js"])
    .pipe(uglify())
    .pipe(gulp.dest("./dist/javascripts"))
    .pipe(connect.reload())
})
// 转义代码  es6转es5  主要是因为ie浏览器不支持
const babel= require("gulp-babel"); 
gulp.task("javascripts-babel" , async ()=>{
    gulp.src(["./src/javascripts/**/*.js"])
    .pipe(babel({
          presets: ['@babel/env']
    }))
    // uglify 在某些场景下压缩 babel转义之后的代码会发生报错; 
    // - 如果遇到这种情况， 我们暂时只能两个插件二选一; 
    .pipe( uglify() )
    .pipe( gulp.dest("./dist/javascripts"))
    // 转存结束后要调用 reload 方法配合页面刷新; 
    .pipe( connect.reload() );
})
// css存储和压缩
// scss高级用法
const sass=require("gulp-sass")(require('sass'))
gulp.task("scss",async()=>{
    gulp.src(["./src/scss/**/*.scss"])
      .pipe(sass().on('error', sass.logError))
      .pipe( gulp.dest("./dist/css/"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
})
// css压缩
const cssmin=require("gulp-cssmin")
gulp.task("scss-min",async()=>{
    gulp.src(["./src/scss/**/*.scss"])
      .pipe(sass().on('error', sass.logError))
      .pipe(cssmin())
      .pipe( gulp.dest("./dist/css/"))
      // 转存结束后要调用 reload 方法配合页面刷新; 
      .pipe( connect.reload() );
})
// 开启监听
gulp.task("watch",async()=>{
    gulp.watch(["./src/**/*.html"] , gulp.parallel("html"));
      gulp.watch(["./src/javascripts/**/*.js"] , gulp.parallel("javascripts"));
      gulp.watch(["./src/scss/**/*.scss"] , gulp.parallel("scss"));
      gulp.watch(["./src/font/*.*"] , gulp.parallel("font"));
})
//默认指令来初始化gulp应用  组合指令 先执行完html之后在执行开启服务和开启监听
gulp.task("default" , gulp.series("html","scss","javascripts" ,"font", gulp.parallel("connect" , "watch")));

// 做一个组合指令 : 

gulp.task("build" , gulp.series("html-min" , "scss-min" , "javascripts-min"));
